<template>
    <div>
        <h1>新增科室</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>科室名称</td>
                    <td>
                        <input type="text" v-model="queryInfo.WardName">
                    </td>
                </tr>

                <tr>
                    <td>科室照片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="queryInfo.WardPhoto" alt="" width="100px" height="100px" v-if="queryInfo.WardPhoto!=''">
                    </td>
                </tr>

                <tr>
                    <td>成立日期</td>
                    <td>
                        <input type="date" v-model="queryInfo.CreateTime">
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
import moment from 'moment';

//传递参数
const route=useRoute();
//跳转页面
const router=useRouter();

//声明一个变量接收向后端传递的值
let queryInfo:any=reactive({
  "WardName": "",
  "WardPhoto": "",
  "CreateTime": ""
})

//添加
const ok=()=>{
    if(queryInfo.WardName==""){
        alert('科室名称不能为空')
        return
    }
    if(queryInfo.WardPhoto==""){
        alert('科室照片不能为空')
        return
    }
    if(queryInfo.CreateTime==""){
        alert('成立日期不能为空')
        return
    }
    axios({
        url:'/api/Ward/AddWard',
        method:'post',
        data:queryInfo
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert('科室名称已存在，请重新输入！')
            return
        }
        if(res.data>0){
            alert('添加成功')
            router.push('/showWard')
        }
        else{
            alert('添加失败')
            return
        }
    })
    .catch(err=>{
        console.log(err);
        
    })
}

//上传图片
const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        url:'/api/Img/Imgs',
        method:'post',
        data:f
    })
    .then(res=>{
        console.log(res);
        if(res.data=="不是图片"){
            alert('您上传的文件格式不是图片，请重新上传！')
            return
        }
        else if(res.data=="大于2M"){
            alert('您上传的文件大小超过2M，请重新上传！')
            return
        }
        else{
            alert('上传成功')
            queryInfo.WardPhoto=res.data;
            return
        }
    })
    .catch(err=>{
        console.log(err);
        
    })
}
</script>

<style scoped>

</style>